<template>
	<view class="bookshelf">
		<view class="list">
			<view class="item" v-for="item in list" :key="item.id" @click="gotoBook(
	item.book_id,item.gotowx
		)">
				<view class="icon" @click="selectItem(item.id)">
					<image class="bg_img" :src="item.cover_img" lazy-load></image>

					<view class="bg" :class="{ active: isEdit }">
						<view class="round">
							<view class="selected" v-if="val.includes(item.id)">
								<uni-icons type="checkmarkempty" size="16" color="#fff"></uni-icons>
							</view>
						</view>
					</view>
				</view>

				<view class="txt">{{ item.name }}</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { computed } from 'vue'
	import { BookItem } from '@/types/index'

	interface Props {
		modelValue : number[],
		list : BookItem[],
		isEdit : boolean
	}

	const props = withDefaults(defineProps<Props>(), {
		isEdit: false
	})

	const emit = defineEmits(['update:modelValue', 'gotoBook'])

	const val = computed({
		get: () => {
			return props.modelValue
		},
		set: (val : number[]) => {
			emit('update:modelValue', val)
		}
	})

	const gotoBook = (id : string | number ) => {
		if (props.isEdit || !id) return
		emit('gotoBook', id)
	}

	const selectItem = (id : number) => {
		if (!props.isEdit) return
		if (val.value.includes(id)) {
			val.value = val.value.filter(num => num != id)
		} else {
			val.value.push(id)
		}
	}
</script>

<style scoped lang="scss">
	.bookshelf {
		padding: 20rpx 30rpx;

		.list {
			margin: 0 -10rpx;
			display: flex;
			flex-wrap: wrap;
			box-sizing: border-box;

			.item {
				padding: 12rpx 10rpx;
				width: 20%;
				box-sizing: border-box;

				.icon {
					position: relative;
					display: flex;
					// height: 6rem;
					overflow: hidden;

					.bg_img {
					
						// overflow: hidden;
						width: 4rem;
						// height: 7rem;
						object-fit: cover;
						height: 6rem;
					}

					.bg {
						position: absolute;
						top: 0;
						left: 0;

						background: rgba(0, 0, 0, .6);
						border-radius: 12rpx;
						opacity: 0;
						transition: all .4s;
						@include size(144rpx, 180rpx);
						border-radius: 8rpx;

						&.active {
							opacity: 1;
						}

						.round {
							position: absolute;
							right: 10rpx;
							bottom: 10rpx;
							@include size(40rpx);
							border-radius: 50%;
							background-color: rgba(255, 255, 255, .5);

							.selected {
								@include size(100%);
								background: #FE7A16;
								border-radius: 50%;
								@include center(flex);
							}
						}
					}
				}

				.txt {
					margin-top: 16rpx;
					@include tx(28rpx);
					color: #2D2D2D;
					@include omit(1);
				}
			}
		}
	}
</style>